<script>
import GraphItem from './components/graphItem'
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    pageNo: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 9
    },
    total: {
      type: Number,
      default: 0
    }
  },
  components: {
    GraphItem
  },
  inject: [
    'handleToDetail',
  ],
  methods: {
    handleCurrentChange(val) {
      this.$emit('handlePageChange', val)
    },
  }
}
</script>
<template>
  <div class="graph_table">
    <template v-if="data && data.length">
      <div 
        class="graph_item"
        v-for="item in data"
        :key="item.id"
      >
        <GraphItem :graphData="item"></GraphItem>
      </div>
      <p class="pagination">
        <el-pagination
          size="large"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-size="pageSize"
          background
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </p>
    </template>
    <!-- <a-empty v-else class="empty" description="暂无数据"/> -->
  </div>
</template>
<style lang="scss" scoped>
.graph_table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 100px; 
  .empty {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
  }
  .pagination {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%,200%,0);
  }
  .graph_item {
    width: 32%;
    height: 100%;
    margin: 0 auto 20px;
    aspect-ratio: 16/9;
  }
}
</style>